<template>
    <div class="my-component">
      <div class="cards">
      <div class="message-write">
        <br>
        <h1 class="message-board-title">留言板</h1>
    <!--留言输入模板-->
        <el-input
          class="message-input"
          type="text"
          placeholder="请输入你的名字"
          v-model="messageBoard.author"
          maxlength="16"
          show-word-limit
        >
        </el-input>
        <br>
        <el-input
          class="message-input"
          type="text"
          placeholder="请输入留言内容"
          v-model="messageBoard.message"
          maxlength="255" 
          show-word-limit
        >
        </el-input>
        <el-button class="message-button" type="primary" plain @click="postMessage">留言</el-button>
      </div>
    </div>
      <div class="message-read">
        <!-- 省略其他留言输入框等 -->
          <!--留言显示模板-->
        <el-table :data="messages" class="message-table" height="250" border style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="message" label="留言内容"></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
        </el-table>
      </div>
    
        <!-- 留言成功或失败提示框 -->
  
      
    </div>
  
     
    </template>
    
    <script>
    import { ref, onMounted } from 'vue';
    import $ from 'jquery'; // 引入jQuery
    
    export default {
      name: 'MessageBoard',
      setup() {
        const messageBoard = ref({//保存用户输入的留言和显示留言列表
          author: '',
          message: '',
        });
    
        const messages = ref([]);
    
        const postMessage = () => {
          console.log('postMessage method called'); // 添加此行
            // 构建要发送的数据对象
          // 获取输入框中的作者和消息内容
          const author = messageBoard.value.author.trim();
            const message = messageBoard.value.message.trim();
    
      // 判断作者和消息内容是否为空
      if (author === '' || message === '') {
        // 如果有任何一个为空，可以在这里进行处理，例如弹出提示框或者执行其他操作
        console.log('作者和消息内容不能为空');
        return; // 停止继续执行后面的逻辑
      }
    
      // 构建要发送的数据对象
      const requestData = {
        author: author,
        message: message,
      };
    
      // 发送留言请求
      $.ajax({
      type: 'POST',
      url: 'http://127.0.0.1:3000/postMessage',
      contentType: 'application/json',
      data: JSON.stringify(requestData),
    
      success: function (response) {
        if (response.status === 'success') {
          console.log("请求成功");
          // 处理留言成功逻辑，例如刷新留言列表
          alert("留言成功");
          // 清空输入框内容
          messageBoard.value.author = '';
            messageBoard.value.message = '';
          getMessages();
        } else if (response.status === 'failed') {
          console.log("留言发布失败: " + response.message);
          // 处理留言发布失败逻辑，例如显示错误信息给用户
        } else {
          // 处理其他响应情况
        }
      },
      error: function (error) {
        // 处理请求失败逻辑
        console.error('请求失败：', error);
      },
    });
    
    };
    
        const getMessages = () => {
          // 获取留言列表请求
          $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1:3000/getMessages',
            success: function (response) {
              messages.value = response;
              console.log("收录成功");
            },
            error: function (error) {
              // 处理请求失败逻辑
              console.error('请求失败：', error);
              // 可以根据具体情况决定如何处理错误
              // 例如，显示错误信息给用户
              // this.errorMessage = '请求失败，请稍后重试';
              // 或者执行其他操作，如记录错误日志
              // this.logError(error);
            },
          });
        };
    
        // 使用 onMounted 钩子，在页面加载时触发 getMessages
        onMounted(() => {
          getMessages();
        });
    
        return {
          messageBoard,
          messages,
          postMessage,
        };
      },
    };
    </script>
    
    <style scoped>
    
  
    .my-component  {
      background-image: url('@/assets/images/留言板背景图片.jpg');
      background-size: 100% 100%; 
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
       position: absolute; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 这些是一些常见的背景设置，你可以根据需要进行调整 */
      
    }
    .cards {
      /*flex-direction: column;*/
      gap: 15px;
      display: flex; /* 使用 Flex 布局 */
      flex-direction: column; /* 垂直方向布局 */
      /*align-items: center; /* 水平居中对齐 */
      /*justify-content: center; /* 垂直居中对齐 */
      
    }
    .message-write {
      max-width: 600px;
      margin: 0 auto;
      padding: 0px;
      text-align: center; /* 居中内容 */
    }
    .message-read {
      max-width: 1000px;
      margin: 0 auto;
      padding: 30px;
      text-align: center; /* 居中内容 */
      
    }
    
    .message-board-title {
      font-size: 30px;
      margin-bottom: 20px;
      margin-top: 50px; /* 添加上边距 */
     color: #03a9f4;
    }
  
  
    .message-input {
      width: 100%;
      margin-bottom: 10px;
      margin-top: 10px; /* 添加上边距 */
    }
    
    .message-input[type="text"] {
      font-size: 16px; 
      padding: 30px; 
      width: 100%; 
    }
    
  
  
    .message-button {
     /*9.27修改
     width: 50%;
      margin: 10px auto;
      font-size: 18px; 
      padding: 10px 20px;  
     */
     text-decoration: none;
    position: relative;
    border: none;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
  }
  
  button:hover {
    animation: ani 8s linear infinite;
    border: none;
  }
  
  @keyframes ani {
    0% {
      background-position: 0%;
    }
  
    100% {
      background-position: 400%;
    }
  }
  
  button:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
  }
  
  button:hover::before {
    filter: blur(20px);
  }
  
  button:active {
    background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  }
  
    .message-table {
      margin-top: 20px;
      width: 100%; /* 让表格宽度充满容器 */
    }
    
  
    /* 可以根据需要继续添加样式规则 */
    /* 背景图片*/
   
  
    </style>
    
    